<template>
	<view class="page-container">
		<template v-if="Array.isArray(orderList) && orderList.length">
			<view v-for="(item, index) in orderList" :key="index" class="box-container" @click="toOrderDetail(item)">
				<view class="order-time">
					{{ item.date.split('-')[1] + '-' + item.date.split('-')[2] }}{{ item.mealType }}
				</view>
				<view class="order-title">
					<view class="order-value">中山大学附属第六医院职工</view>
					<view class="order-tip">
						<view v-if="item.orderStatus==0" class="order-status">未支付</view>
						<view v-if="item.orderStatus==1" class="order-status">已支付</view>
					</view>
				</view>
				<view class="order-text">订单号：{{item.orderID}}</view>
				<view class="order-text">中六知识城院区</view>
			</view>
		</template>
		<uv-empty v-else icon="/static/images/default/empty_order.png" text="订单空空如也"></uv-empty>
	</view>
</template>


<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {}
		},
		computed: {
			...mapGetters(["orderList"])
		},
		
		methods: {
			toOrderDetail(item) {
				console.log('item', item)
				uni.navigateTo({
					url: "/pages/takeaway/orderDetail",
					success: function(res) {
						// 通过 `eventChannel` 传递数据
						res.eventChannel.emit('orderDetailData', item);
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-container {
		background-color: #f6f7f9;
		min-height: 100vh;
		overflow: hidden;

		.box-container {
			background-color: #ffffff;
			margin: 24rpx;
			border-radius: 16rpx;
			padding: 24rpx 32rpx;

			.order-time {
				background-color: #cfe9ff;
				color: #0071d5;
				padding: 2rpx 12rpx;
				width: fit-content;
				font-size: 28rpx;
				margin-bottom: 12rpx;
			}

			.order-title {
				font-size: 28rpx;
				line-height: 60rpx;
				display: flex;

				.order-value {
					flex: 1;
				}
				.order-tip {
					width: fit-content;
					.order-status {
						color: #ff8400;
					}
				}
			}

			.order-text {
				font-size: 26rpx;
				line-height: 48rpx;
			}
		}
	}
	
</style>